<template>
	<!-- 活动execl表 -->
	<view>
		<view class="all-perfor">
			<view class="all-perfor-title">
				活动业绩汇总
			</view>
			<view class="all-perfor-tip">
				{{ title | goodName_val }}
			</view>
			<view class="all-perfor-money">
				<view class="">
					成交额(元)
				</view>
				<view class="">
					¥{{ total }}
				</view>
			</view>
			<view class="course-statistics">
				<view class="course-statistics-title">
					课程数据统计
				</view>
				<view class="course-statistics-content">
					<view class="course-statistics-details">
						<view class="">{{zongsum}}</view>
						<view class="">总订单数</view>
					</view>
					<view class="course-statistics-details">
						<view class="">{{yisum}}</view>
						<view class="">已付款订单</view>
					</view>
					<view class="course-statistics-details">
						<view class="">{{weisum}}</view>
						<view class="">待付款订单</view>
					</view>
					<!-- <view class="course-statistics-line"></view>
					<view class="course-statistics-details">
						<view class="">{{courseData.courseCount}}</view>
						<view class="">报名课程(个)</view>
					</view>
					<view class="course-statistics-line"></view>
					<view class="course-statistics-details">
						<view class="">{{courseData.sendCount}}</view>
						<view class="">赠送课程(个)</view>
					</view> -->
				</view>
			</view>
			<view class="execl-download-address">
				<text>活动业绩下载地址：</text><text>{{downAddre | goodName_down}}</text>
			</view>
			<view class="perfor-execl" >
				<view :data-clipboard-text='downAddre' class="copy" @click="downLoad">复制链接，下载业绩excel</view>
				<!-- <view>分享好友下载</view> -->
			</view>
		</view>
		<!-- <view class="organ-perfor">
			<view class="organ-perfor-title">
				机构业绩说明
			</view>
			<view class="organ-perfor-content" v-for="item in salesroom" :key='item.store_id'>
				<view class="explain-title">
					<view class=""></view>
					<view class="">
						{{item.name | goodName}}
					</view>
				</view>
				<view class="all-perfor-money">
					<view class="">
						成交额(元)
					</view>
					<view class="">
						¥{{item.total}}
					</view>
				</view>
				<view class="course-statistics">
					<view class="course-statistics-title">
						课程数据统计
					</view>
					<view class="course-statistics-content">
						<view class="course-statistics-details">
							<view class="">{{item.ordnum}}</view>
							<view class="">订单数(个)</view>
						</view>
						<view class="course-statistics-line"></view>
						<view class="course-statistics-details">
							<view class="">{{item.course_count}}</view>
							<view class="">报名课程(个)</view>
						</view>
						<view class="course-statistics-line"></view>
						<view class="course-statistics-details">
							<view class="">{{item.send_course_count}}</view>
							<view class="">赠送课程(个)</view>
						</view>
					</view>
				</view>
				<view class="execl-download-address">
					<text>活动业绩下载地址：</text>
					<text>{{item.download_href | goodName_down}}</text>
				</view>
				<view class="perfor-execl" >
					<view  :data-clipboard-text='item.download_href' :class="'copy'+item.customer_organization_salesroom_id" @click="downSalesroom(item.customer_organization_salesroom_id)">复制链接，下载业绩excel</view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import Clipboard from 'clipboard'
	export default{
		filters: {
			goodName_val(value) {
				if (!value) return ''
				if (value.length > 40) {
					return value.slice(0, 40) + '...'
				}
				return value
			},
			goodName(value) {
				if (!value) return ''
				if (value.length > 16) {
					return value.slice(0, 16) + '...'
				}
				return value
			},
			goodName_down(value) {
				if (!value) return ''
				if (value.length > 30) {
					return value.slice(0, 30) + '...'
				}
				return value
			},
		},
		data(){
			return{
				zongsum:0,
				yisum:0,
				weisum:0,
				activity_id:0,
				title:"",
				store_id:0,
				token:'',
				data:{},
				ordtotal:0,
				courseCount:0,
				sendCourse:0,
				downAddre:"",
				total:0,
				salesroom: []
			}
		},
		onLoad(option) {
			let store_id = parseInt(option.store_id,10);
			if(!store_id>0){
				store_id = uni.getStorageSync('store_id')
			}else{
				uni.setStorageSync('store_id', store_id)
			}
			this.store_id = store_id
			this.$store.commit('updateStoreId',store_id)
			
			this.token = this.$store.getters.getToken
			this.activity_id = uni.getStorageSync('actPerfor').activity_id
			this.title = uni.getStorageSync('actPerfor').name
			this.downAddre = this.$store.state.URL + '/order/order/get_excel?token=' + this.token + '&activity_id=' + this.activity_id
			this.queryCurriculumStatistics()
		},
		onShow() {
			this.gainData()
		},
		methods:{
			queryCurriculumStatistics(){
				this.$api.queryCurriculumStatistics({"activity_id":this.activity_id}).then(res => {
					console.log("queryCurriculumStatistics",res)
					this.zongsum = res.zongsum
					this.yisum = res.yisum
					this.weisum = res.weisum
				})
			},
			downLoad(){
				const clipboard = new Clipboard('.copy')
				clipboard.on('success', (e) => {
					uni.showToast({
						title:'下载链接已复制，请前往浏览器下载！',
						icon:'none',
						duration:2000
					})
				  clipboard.destroy()
				})
				clipboard.on('error', () => {
				  clipboard.destroy()
				})
			},
			// #ifdef MP-WEIXIN
				downLoad(){
					uni.setClipboardData({
						data: this.downAddre,
						success: function (res) {
							uni.getClipboardData({
								success: function (res) {
									console.log(res.data) // data
									uni.showToast({
										title:'下载链接已复制，请前往浏览器下载！',
										icon:'none',
										duration:2000
									})
								}
							})
						}
					})
				},
			// #endif
			downSalesroom(id){
				const clipboard = new Clipboard('.copy'+id)
				clipboard.on('success', (e) => {
					uni.showToast({
						title:'下载链接已复制，请前往浏览器下载！',
						icon:'none',
						duration:2000
					})
				  clipboard.destroy()
				})
				clipboard.on('error', () => {
				  clipboard.destroy()
				})
			},
			gainData(){
				let data = {
					token:this.$store.getters.getToken,
					activity_id:this.activity_id
				}
				this.$api.order_excel_upload(data).then(res => {
					console.log(res)
					if(res.status){
						this.total = res.data.all.total;
						this.ordtotal = res.data.all.ordtotal;
						this.courseCount = res.data.all.courseCount;
						this.sendCourse = res.data.all.sendCourse;
						if(res.data.salesroom.length>0){
							for(let i=0;i<res.data.salesroom.length;i++){
								res.data.salesroom[i].download_href=this.URL+'/order/order/get_activity_salesroom_excel?token='+this.token+'&activity_id='+this.activity_id+'&organization_salesroom_id='+res.data.salesroom[i].customer_organization_salesroom_id
							}
							this.salesroom=res.data.salesroom
						}
						
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none',
							duration:2000
						})
					}
				}).catch(err => {
					console.log(err)
				})
			}
		}
	}
</script>

<style>
	page{
		background: #F3F3F4;
	}
	.all-perfor{
		width: 100%;
		padding: 30upx;
		box-sizing: border-box;
		background: #FFFFFF;
	}
	.all-perfor-title{
		text-align: center;
		color: #666666;
		font-size: 40upx;
		margin-top: 10upx;
	}
	.all-perfor-tip{
		color: #333333;
		font-size: 34upx;
		margin-top: 40upx;
		font-weight: 800;
	}
	.all-perfor-money{
		padding: 30upx 0;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		border-top: 1upx solid #DEDEDE;
		margin-top: 30upx;
		border-bottom: 1upx solid #DEDEDE;
	}
	.all-perfor-money>view:first-child{
		color: #333333;
		font-size: 30upx;
	}
	.all-perfor-money>view:last-child{
		color: #FF391F;
		font-size: 34upx;
	}
	.all-perfor-money>view>text{
		font-size: 28upx;
	}
	.course-statistics{
		margin-top: 28upx;
		padding-bottom: 30upx;
		box-sizing: border-box;
		border-bottom: 1upx solid #DEDEDE;
	}
	.course-statistics-title{
		color: #333333;
		font-size: 30upx;
	}
	.course-statistics-content{
		display: flex;
		justify-content: space-around;
		margin-top: 40upx;
		text-align: center;		
	}
	.course-statistics-details>view:first-child{
		color: #333333;
		font-size: 50upx;
		margin-bottom: 10upx;
	}
	.course-statistics-details>view:last-child{
		color: #999999;
		font-size: 24upx;
	}
	.course-statistics-line{
		width: 2upx;
		height: 46upx;
		border-left: 2upx solid #DEDEDE;
		margin-top: 20upx;
	}
	.execl-download-address{
		width: 100%;
		color: #333333;
		font-size: 29upx;
		margin-top: 30upx;
		display: flex;
	}
	.execl-download-address>text:last-child{
		color: #0084FF;
	}
	.perfor-execl{
		width: 100%;
		display: flex;
		justify-content: space-around;
		margin-top: 58upx;
	}
	.perfor-execl>view{
		width: 80%;
		height: 92upx;
		line-height: 92upx;
		border: 1upx solid #FF8B46;
		color: #FF8B46;
		font-size: 32upx;
		text-align: center;
		border-radius: 44upx;
	}
	.organ-perfor{
		width: 100%;
		margin-top: 20upx;
	}
	.organ-perfor-title{
		text-align: center;
		width: 100%;
		color: #666666;
		font-size: 40upx;
		padding-top: 40upx;
		background: #FFFFFF;
		box-sizing: border-box;
	}
	.organ-perfor-content{
		width: 100%;
		background: #FFFFFF;
		margin-bottom: 20upx;
		padding: 30upx;
		box-sizing: border-box;
	}
	.explain-title{
		display: flex;
		width: 100%;
		background: #FFFFFF;
	}
	.explain-title>view:first-child{
		width: 8upx;
		height: 32upx;
		background: #FF8B46;
		margin-top: 6upx;
	}
	.explain-title>view:last-child{
		color: #333333;
		font-size: 30upx;
		margin-left: 10upx;
	}
</style>
